<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/layui/layui.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.css">
    <style>
        .layui-table-page{
            text-align:center;
        }
        .layui-btn-pink {
            background-color: #ff6f94;
        }
    </style>

</head>
<body>
<div class="search">
    <div class="layui-inline">
        <input class="layui-input" name="q_username" id="q_username"
               autocomplete="off" placeholder="用户名">
    </div>
    <button class="layui-btn layui-btn-pink" data-type="reload">
        <i class="layui-icon">&#xe615;</i>搜索
    </button>
    <div class="layui-btn-group myBtnGroup">
        <button class="layui-btn" data-type="Add">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
        <button class="layui-btn layui-btn-warm" data-type="Update">
            <i class="layui-icon">&#xe642;</i>修改
        </button>
        <button class="layui-btn layui-btn-danger" data-type="Delete">
            <i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</div>
<table id="tableId" lay-filter="tableFilter"></table>
<script id="statusTpl" type="text/html">
    {{#  if(d.status=== 0){ }}
        禁用
    {{#  } }}
    {{#  if(d.status=== 1){ }}
        正常
    {{#  } }}
</script>
<script>
    layui.use(['table','layer'],function(){
        var table=layui.table,
            $=layui.jquery,
            layer=layui.layer;

        var tableIns=table.render({
            elem:'#tableId',
            url:baseURL+'/UserServlet?action=query',
            page:true,
            cols:[[
                {type:'checkbox'},
                {field:'userId',title:'用户ID'},
                {field:'username',title:'用户名称'},
                {field:'roleName',title:'角色名称'},
                {field:'deptName',title:'所属部门'},
                {field:'email',title:'邮箱'},
                {field:'tel',title:'手机号码'},
                {field:'status',title:'状态',templet:'#statusTpl'},
                {field:'createTime',title:'创建时间'},
            ]]
        });
        var active={
            reload:function() {
                var q_username = $('#q_username');
                //执行重载
                tableIns.reload({
                    where:{
                        username:q_username.val()
                    }
                });
            },
            Add:function(){
                window.location.href='userAdd.html';
            },
            Update:function(){
                //如果点击修改按钮 我们需要判断是否选中了待修改的行
                var checkStatus=table.checkStatus('tableId');
                var data=checkStatus.data;
                if(data.length<=0) {
                    layer.alert('尚未选择待修改的用户数据');
                } else if(data.length>1) {
                    layer.msg('一次只能修改一条用户数据');
                } else {
                    //开始传递数据
                    //1.利用URL传递数据
                    //var url='userUpdate.html?param='+JSON.stringify(data);
                    //2.利用H5的本地存储传递数据
                    var url='userUpdate.html';
                    /*if(window.localStorage){    //说明浏览器支持H5离线存储方式
                        localStorage.param = JSON.stringify(data);
                    }*/
                    //3.利用Cookie传值
                    addCookie('param',JSON.stringify(data));
                    console.log(JSON.stringify(data));
                    window.location.href=url;
                }
            },
            Delete:function(){
                //如果点击删除按钮 需要判断待删除的数据
                var checkStatus=table.checkStatus('tableId');
                var data=checkStatus.data;
                if(data.length<=0) {
                    layer.alert('尚未选择待删除的用户数据');
                } else {
                    //确认提示框
                    layer.confirm('你确定要删除选择的用户数据吗?',function(index){
                        var userIds=[]; //用一个数组来存放待删除的所有用户ID
                        for(var ii=0;ii<data.length;ii++) {
                            var d=data[ii];
                            userIds.push(d['userId']);
                        }
                        console.log(userIds.join(','));
                        var url=baseURL+'/UserServlet';
                        var param={
                            action:'delete',
                            userIds:userIds.join(',')
                        };
                        $.post(url,param,function(d) {
                            layer.msg(d);
                            active.reload();
                            layer.close(index);
                        });
                    });
                }
            }
        }

       // $('.myBtnGroup .layui-btn').bind('click',function(){
        $('.layui-btn').bind('click',function(){
            var type=$(this).data('type');
            //var url='user'+type+'.html';
            //window.location.href=url;
            active[type]?active[type].call(this):'';
        });
    });
</script>
</body>
</html>